<div id="live-icons-container" class="live-icons-container">
  <lv-group lvGutter="16px">
    <button lv-button (click)="Customized()">{{ label }}</button>
    <button lv-button [disabled]="!canDownLoad" (click)="CustomizedDown()">{{ i18n.get('batch_download') }}</button>
  </lv-group>

  <h2>{{ i18n.get('icons_public_icon') }}</h2>
  <div id="live-icons-public">
    <div class="live-icon-item" *ngFor="let item of common">
      <ng-container *ngTemplateOutlet="iconTpl; context: { $implicit: item, type: 'public' }"></ng-container>
    </div>
  </div>

  <h2>{{ i18n.get('icons_operate_icon') }}</h2>
  <div id="live-icons-operate">
    <div class="live-icon-item-business" *ngFor="let item of operate">
      <ng-container *ngTemplateOutlet="iconTpl; context: { $implicit: item, type: 'operate' }"></ng-container>
    </div>
  </div>

  <h2>{{ i18n.get('icons_business_icon') }}</h2>
  <div id="live-icons-business">
    <div class="live-icon-item-business" *ngFor="let item of business">
      <ng-container *ngTemplateOutlet="iconTpl; context: { $implicit: item, type: 'business' }"></ng-container>
    </div>
  </div>

  <h2>{{ i18n.get('icons_illustration_icon') }}</h2>
  <div id="live-icons-illustration">
    <div class="live-icon-item-illustration" *ngFor="let item of illustration">
      <ng-container *ngTemplateOutlet="iconTpl; context: { $implicit: item, type: 'illustration' }"></ng-container>
    </div>
  </div>

  <ng-template #iconTpl let-data let-type="type">
    <ng-container *ngIf="!isCustomized">
      <div class="live-icon-item-content">
        <i
          [lv-icon]="data"
          [ngStyle]="{
            width: getSvgSize(data).width >= 48 ? getSvgSize(data).width + 'px' : '24px',
            height: getSvgSize(data).height >= 48 ? getSvgSize(data).height + 'px' : '24px'
          }"
        ></i>
      </div>
      <p style="text-align: center">{{ data }}</p>
      <div class="live-icon-mask">
        <div class="live-mask-demo">
          <i
            [lv-icon]="data"
            [ngStyle]="{
              width: getSvgSize(data).width >= 48 ? '48px' : '24px',
              height: getSvgSize(data).height >= 48 ? '48px' : '24px'
            }"
          ></i>
        </div>
        <div class="live-mask-operate">
          <i *ngIf="type === 'public'" lv-icon="icon-copy" class="live-icon-16" lvColorState="true" (click)="iconCopy(data)"></i>
          <i lv-icon="lv-icon-download" class="live-icon-16" lvColorState="true" (click)="openDownloadModal(data)"></i>
        </div>
      </div>
    </ng-container>

    <ng-container *ngIf="isCustomized">
      <div class="live-icon-item-border" (click)="toggleCustomized(data)">
        <div class="live-icon-item-content">
          <i [lv-icon]="data" [ngStyle]="{ width: getSvgSize(data).width + 'px', height: getSvgSize(data).height + 'px' }"></i>
        </div>
        <div style="text-align: center">{{ data }}</div>
        <label
          lv-checkbox
          style="position: absolute; top: 12px; left: 12px"
          [ngModel]="isSelected(data)"
          (ngModelChange)="selectedIconsChange(data)"
          (click)="$event.stopPropagation()"
        ></label>
      </div>
    </ng-container>
  </ng-template>

  <!-- 下载弹窗 -->
  <ng-template #DownloadModalTpl>
    <section class="live-icon-modal">
      <div class="live-icon-modal-container">
        <i
          [lv-icon]="selectedIcon"
          [ngStyle]="{
            width: getSvgSize(selectedIcon).width > 100 ? '100px' : getSvgSize(selectedIcon).width + 'px',
            height: getSvgSize(selectedIcon).height > 100 ? '100px' : getSvgSize(selectedIcon).height + 'px',
            color: selectedColor
          }"
        ></i>
      </div>
      <div class="live-icon-config">
        <lv-group lvDirection="vertical" lvGutter="16px">
          <ul class="live-icon-color">
            <li
              *ngFor="let color of colorCards"
              [ngClass]="{ 'live-icon-color-item': true, 'live-icon-color-active': colorActive(color) }"
              [style.background-color]="color"
              (click)="colorChange(color)"
            ></li>
          </ul>
          <input id="colorInput" style="width: 200px" lv-input [(ngModel)]="selectedColor" />
          <lv-group lvGutter="8px">
            <button lv-button (click)="downLoad('png')">{{ i18n.get('icons_download_png') }}</button>
            <button lv-button (click)="downLoad('svg')">{{ i18n.get('icons_download_svg') }}</button>
          </lv-group>
        </lv-group>
      </div>
    </section>
  </ng-template>
</div>
